<template>
	<div class="login">
		<v-header :back-display="true">
			<div slot="title">登 录</div>
		</v-header>

		<div class="logo">
			<img src="@/assets/logo.png" alt />
		</div>
		<van-form @submit="onSubmit">
			<van-field
				v-model="account"
				name="account"
				label="账号 :"
				clearable
				maxlength="8"
				left-icon="user-circle-o"
				placeholder="请输入邮箱/用户名/手机号"
				:rules="[{ required: true }]"
			/>
			<van-field
				v-model="password"
				type="password"
				name="password"
				label="密码 :"
				clearable
				maxlength="6"
				autocomplete="off"
				left-icon="lock"
				placeholder="密码为6位数字和字母组合"
				:rules="[{ pattern, required: true }]"
			/>
			<div class="login-btn">
				<van-button class="btn" native-type="submit">登 录</van-button>
				<!-- <van-button native-type="button" @click="tohome" class="btn Rbtn">参加考试</van-button> -->
			</div>
			<div class="bottom">
				<p>没有账号 ? 请联系老师</p>
				<!-- <router-link class="router" to="/regist">注 册</router-link> -->
			</div>
		</van-form>
	</div>
</template>

<script>
import api from '../../api/api'
import { setCookie } from '@/utils/cookie.js'
import { mapActions } from 'vuex'
import header from '@/components/main/header'
import { Form, Field, Button, Toast, Dialog } from 'vant'

export default {
	components: {
		'v-header': header,
		[Form.name]: Form,
		[Field.name]: Field,
		[Button.name]: Button,
		[Toast.name]: Toast,
		[Dialog.Component.name]: Dialog.Component,
	},
	data() {
		return {
			account: '', //  这是它的接口命名  前端只能跟着它走
			password_a: 'abc123',
			password: '',
			// pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/,  // 密码正则  之前要求是  密码为6位 (数字和字母组合)
			pattern: '', // 密码正则  (这样 密码888888 可以通过)
			roleid: '',
		}
	},
	created() {
		// this.schoolLists()
	},

	methods: {
		...mapActions(['setUserInfo']),
		schoolLists() {
			api
				.schoollist()
				.then((res) => {
					console.log('one', res)
				})
				.catch((error) => {
					console.log(error)
				})
		},
		//提交表单  登录
		onSubmit(data) {
			console.log('提交登录表单', data)
			data.manner = 'username' // 这是它的 接口所需 无奈
			const toast1 = Toast.loading({ message: '登录中...', forbidClick: true })
			console.log('***********************')
			api
				.Login(data)
				.then((res) => {
					console.log('登录响应', res)
					if (res.message == 'success') {
						toast1.clear()
						Toast.success('登录成功')
						let user = {
							avatar: res.result.upicture, // 头像
							username: res.result.realname, // 用户名
							id: res.result.id, // UID
							school: res.result.school, //  学校
							gender: res.result.gender, // 性别
							address: res.result.address, // 地址
							email: res.result.email, // 邮箱
							mobilePhone: res.result.mobilePhone, // 手机号码
						}
						this.setUserInfo(user) //mapAction 传参到 actions里请求数据
						this.roleid = res.result.id
						// this.$store.commit('setToken', res.result.sessionId)  // 将token和登录信息 分开保存
						setCookie('jsessionid', res.result.sessionId) // 超过30天cookie失效 需重新登录 (功能没来得及写)
						setTimeout(() => {
							this.$router.push({ path: '/home', query: { roleid: this.roleid } })
						}, 2000)
					} else {
						toast1.clear()
						Toast.fail(res.result)
					}
				})
				.catch((error) => {
					toast1.clear()
					Toast.fail('登录失败')
					console.log(error)
				})
		},

		// 参加考试
		tohome() {
			this.$router.push({ path: '/home' })
		},
	},
}
</script>

<style lang="less" scoped>
.logo {
	width: 180px;
	margin: 70px auto 30px;
	img {
		display: block;
		width: 100%;
	}
}
.van-form {
	width: 80%;
	margin: 0 auto;
}
/deep/.van-field__label {
	width: 50px;
}
/deep/.van-field__left-icon {
	margin-right: 6px;
}
.login-btn {
	display: flex;
	justify-content: space-around;
	margin-top: 50px;
	.btn {
		background-color: #ff6400;
		width: 40%;
		border-radius: 5px;
		color: #fff;
		text-align: center;
		line-height: 40px;
		height: 40px;
		font-size: 14px;
	}
	.Rbtn {
		background-color: #3d9db3;
	}
}
.bottom {
	display: flex;
	justify-content: center;
	font-size: 16px;
	margin-top: 40px;
	p {
		color: #333;
		margin-right: 10px;
	}
	.router {
		color: #ff6400;
	}
}
</style>
